<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>分页测试</title>
	</head>

	<body>
		<h1>分页测试</h1>
		<div>
			<div>pageSize:
				<select name="pageSize" id="pageSize" value="10" style="width: 200px;">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="5">5</option>
					<option value="10">10</option>
					<option value="20">20</option>
					<option value="30">30</option>
					<option value="40">40</option>
					<option value="50">50</option>
					<option value="60">60</option>
				</select>
				<div>pageIndex:<input type="number" name="pageIndex" id="pageIndex" value="1" /></div>
				<div><input type="button" name="ok" id="ok" value="ok" /></div>
				<div id="list"></div>
			</div>
	</body>
	<script type="text/javascript">
		var arr = [];
		for(var i = 0; i < 100; i++) {
			arr.push(i);
		}

		/**
		 * 获取列表的某部分数据
		 * @param {Object} list 数据源
		 * @param {Object} start 起点
		 * @param {Object} dataCount 数据数量
		 */
		function getDataSpan(list, start, dataCount) {
			var end = start + dataCount;
			var arr = [];
			for(var i = start; i < end; i++) {
				var tmp = list[i];
				//用于优化查询的末尾为undefined的时候就直接返回数据
				if(tmp === undefined) {
					return {
						list: arr,
						totalCount: list.length
					};
				} else {
					arr.push(tmp);
				}
			}
			return {
				list: arr,
				totalCount: list.length
			};
		}

		function getPaginationData(list, pageIndex, pageSize) {
			return getDataSpan(list, (pageIndex - 1) * pageSize, pageSize);
		}
		document.querySelector('#ok').onclick = function() {
			var pageSize = parseInt(document.querySelector('#pageSize').value);
			var pageIndex = parseInt(document.querySelector('#pageIndex').value);
			var result = getPaginationData(arr, pageIndex, pageSize);
			document.querySelector('#list').innerHTML = result.list.toString() + ",total count:" + result.totalCount;
		}
	</script>

</html>